<template>
  <div class="reg">
    <loginBase>
      <div class="box" slot="box">
        <ul class="form">
          <li class="inputLi">
            <input type="text" v-model="userPhone" placeholder="请输入手机号">
          </li>
          <li class="inputLi">
            <input type="number" v-model="msgCode" placeholder="请输入验证码">
            <span class="getCode" v-show="!isRuning" @click="getMsg">获取验证码</span>
            <span class="runCode getCode" v-show="isRuning">{{ time }}s</span>
          </li>
          <li class="inputLi">
            <input type="password" v-model="password" placeholder="请设置密码">
          </li>
          <li class="inputLi">
            <input type="number" v-model="qqNum" placeholder="输入QQ号">
          </li>
          <li class="inputLi">
            <input type="text" v-model="wechatNum" placeholder="输入微信号">
          </li>
        </ul>
        <div class="operate">
          <strong>QQ和微信便于我们的客服为你更好地服务。</strong>
          <span @click="$router.push({name: 'login'})">返回登录</span>
        </div>
        <div class="footer">
          <b class="toReg" @click="regTest">完成注册</b>
        </div>
      </div>
    </loginBase>
  </div>
</template>
<script type="text/ecmascript-6">
import LoginBase from '../base/loginBase/newLogBase'
import { getMessage } from '../../assets/js/message.js'
import { isMobile } from '@/assets/js/utils'
import md5 from 'md5'
export default {
  name: 'reg',
  mixins: [getMessage],
  components: {
    LoginBase
  },
  data () {
    return {
      userPhone: '',
      password: '',
      msgCode: '',
      qqNum: '',
      wechatNum: '',
      isRuning: false,
      time: ''
    }
  },
  methods: {
    regTest () {
      if (this.userPhone === '') {
        this.$message({
          message: '请输入用户手机号',
          type: 'warning'
        })
      } else if (this.msgCode === '') {
        this.$message({
          message: '请输入短信验证码',
          type: 'warning'
        })
      } else if (this.password === '') {
        this.$message({
          message: '请输入密码',
          type: 'warning'
        })
      } else {
        this.regNow()
      }
    },
    regNow () {
      let urlApi = ''
      if (this.$route.query.si) {
        urlApi = '/api/seller/account/sellerInvitorRegister'
      } else if (this.$route.query.ii) {
        urlApi = '/api/seller/account/register'
      } else {
        urlApi = '/api/seller/account/register'
      }
      this.$ajax.post(urlApi, {
        telephone: this.userPhone,
        code: this.msgCode,
        type: 1,
        password: md5(this.password),
        qq: this.qqNum,
        wechatNum: this.wechatNum,
        domain: window.location.host,
        inviteCode: this.$route.query.si || this.$route.query.ii || ''
      }).then((data) => {
        if (data.data.code === '200') {
          this.$message({
            message: data.data.message,
            type: 'success',
            onClose: () => {
              localStorage.setItem('__isFirstReg__', 1)
              this.$router.push({ name: 'login' })
            }
          })
        } else if (data.data.code === '1008') {
          if (data.data.message === window.location.host) {
            this.$message({
              message: '您已注册, 请直接登录',
              type: 'warning'
            })
          } else {
            this.$message({
              message: '您已在域名' + data.data.message + '注册过帐号',
              type: 'warning'
            })
          }
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    getMsg () {
      if (this.userPhone === '') {
        this.$message({
          message: '请输入用户手机号',
          type: 'warning'
        })
      } else {
        this.sedMsg()
      }
    },
    toShowReg () {
      if ((this.$route.query.si || this.$route.query.ii) && !this.$route.query.show) {
        this.$router.push({ name: 'showReg', query: this.$route.query })
      }
    }
  },
  created () {
    this.toShowReg()
  },
  beforeRouteEnter (to, from, next) {
    if (isMobile()) {
      next({ name: 'mobileIndex', query: to.query })
    } else {
      next()
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.reg
  width 100%
  height 100%
  .box
    width 360px
    .form
      border 1px solid #DDDDDD
      border-radius 10px
      li
        height 60px
        box-sizing border-box
        padding 20px
        display flex
        border-bottom 1px solid #DDDDDD
        align-items center
        &:last-child
          border none
        input
          flex 1
          border none
          outline none
          -webkit-appearance none
          font-size 15px
          line-height 40px
        .getCode
          min-width 100px
          font-size 15px
          line-height 40px
          color #F16591
          cursor pointer
          border-left 1px solid #eeeeee
          text-align center
          padding-left 20px
        .runCode
          cursor not-allowed
    .operate
      display flex
      justify-content space-between
      font-size 12px
      line-height 18px
      margin-bottom 30px
      margin-top 5px
      strong
        font-size 12px
        line-height 18px
        color #999999
      span
        color #F16591
        cursor pointer
    .footer
      display flex
      align-items center
      justify-content center
      b
        width 172px
        height 45px
        line-height 45px
        text-align center
        font-size 20px
        font-weight bold
        border-radius 10px
        cursor pointer
        background #F16591
        color #ffffff
        box-shadow 0 0 5px RGBA(241, 101, 145, 0.3)
</style>
